<template>
  <div>
    <div class="choose-audio">
      <el-row type="flex" align="middle" justify="space-between" class="audio-header">
        <div>
          <el-button v-show="showUploadBtn" size="small" @click="uploadVisible = true">上传音频</el-button>
          <el-link class="link" :underline="false" type="primary" @click="toMaterial">
            去管理素材
            <i class="el-icon-arrow-right el-icon--right" />
          </el-link>
        </div>
        <el-input
          v-model="searchFilename"
          class="input"
          placeholder="请输入音频名称"
          size="small"
          @change="loadData"
        />
      </el-row>
      <el-row type="flex" class="audio-main">
        <div class="left">
          <div class="title">音频分组</div>
          <div class="material-tree">
            <el-scrollbar>
              <div v-for="node in categoryTree" :key="node.id">
                <el-row type="flex" align="middle" justify="space-between" class="custom-tree-node__content">
                  <el-row
                    type="flex"
                    class="item-box"
                    align="middle"
                    justify="space-between"
                    @click.native="selectCategory(node.id)"
                  >
                    <i class="el-icon-folder-opened" />
                    <div class="text">{{ node.title }}</div>
                  </el-row>
                </el-row>
                <div class="custom-tree-node__children">
                  <el-row
                    v-for="item in node.children"
                    :key="item.id"
                    type="flex"
                    align="middle"
                    justify="space-between"
                    class="custom-tree-node"
                  >
                    <el-row
                      type="flex"
                      class="item-box"
                      align="middle"
                      justify="space-between"
                      @click.native="selectCategory(item.id)"
                    >
                      <i class="el-icon-folder-opened" />
                      <div class="text">{{ item.title }}({{ item.num||0 }})</div>
                    </el-row>
                  </el-row>
                </div>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div class="right">
          <el-scrollbar>
            <div class="right-main">
              <el-row :gutter="20">
                <el-col v-if="!datas || datas.length == 0" :span="24">暂无素材</el-col>
                <el-radio-group v-else v-model="checked" class="list-box">
                  <el-col v-for="(item, index) in datas" :key="index" :span="12">
                    <el-radio class="content" :label="item.attach_id">
                      <div class="tag">
                        <i class="Angle" />
                        <i class="el-icon-check" />
                      </div>
                      <el-row type="flex" class="file-item">
                        <div class="picture">
                          <el-image>
                            <div slot="error" class="image-slot"><i class="el-icon-document" /></div>
                          </el-image>
                        </div>
                        <el-row type="flex" justify="space-between" class="info">
                          <el-tooltip effect="dark" :content="item.filename" placement="bottom">
                            <div class="name">{{ item.filename }}</div>
                          </el-tooltip>
                          <el-row type="flex" justify="space-between">
                            <div class="desc">{{ item.filesize }}</div>
                            <!-- <div class="desc">01:21</div> -->
                          </el-row>
                        </el-row>
                      </el-row>
                    </el-radio>
                  </el-col>
                </el-radio-group>
              </el-row>
            </div>
          </el-scrollbar>
        </div>
      </el-row>
      <el-row type="flex" justify="end">
        <el-pagination
          :current-page.sync="paginate.page"
          :page-size="paginate.count"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </div>
    <!-- 上传框 -->
    <upload-file
      v-if="uploadVisible"
      ref="uploadbox"
      :upload-visible.sync="uploadVisible"
      :category="categoryTree"
      :limit="1"
      material-type="audio"
      @reload="setReload"
    />
  </div>
</template>

<script>
import UploadFile from '../components/upload_file.vue'
export default {
  components: {
    UploadFile
  },
  data() {
    return {
      response: null,
      paginate: {
        count: 16,
        page: 1
      },
      searchFilename: '',
      currentCategory: 0,
      fileVisible: false,
      uploadVisible: false,
      checked: 0
    }
  },
  computed: {
    categoryTree() {
      if (this.response) {
        return this.response.data.category
      }
      return []
    },
    datas() {
      if (this.response) {
        return this.response.data.datas
      }
      return []
    },
    total() {
      if (this.response) {
        return this.response.data.paginate.total
      }
      return 0
    },
    showUploadBtn() {
        return !!this.response
    }
  },
  watch: {
    checked(val) {
      // 通知更新值
      this.$emit('update:value', val);
    }
  },
  created() {
    this.loadData()
  },
  destroyed() {
    this.checked = 0;
  },
  methods: {
    toMaterial: function() {
      const routeData = this.$router.resolve({ path: '/material/audio' })
      window.open(routeData.href, '_blank')
    },
    loadData: function() {
      this.$http.get(
          '/admin/material/audio',
          {
            ...this.paginate,
            filename: this.searchFilename,
            category: this.currentCategory
          },
          (response) => {
            this.response = response
          },
          _ => {},
          false
      )
    },
    selectCategory: function(id) {
      this.currentCategory = id
      this.paginate = {
        count: 15,
        page: 1
      }
      this.loadData()
    },
    handleCurrentChange: function(page) {
      this.paginate.page = page
      this.loadData()
    },
    setSelect: function() {
      this.$emit('update:value', this.checked)
      this.fileVisible = false
    },
    setReload: function() {
      const attachs = this.$refs.uploadbox.attach_ids
      if (attachs.length > 0) {
        this.checked = attachs[0]
      }
      this.setSelect()
      this.$emit('autoChecked', true);
    }
  }
}
</script>

<style lang="scss" scoped>
.file-item {
  border: 1px solid #ececec;
  width: max-content;
  .picture {
    padding-top: 56px;
    width: 56px;
    height: 0;
    position: relative;
    .el-image {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      ::v-deep.image-slot {
        font-size: 36px;
      }
    }
  }
  .info {
    margin-left: 10px;
    flex: 1;
    flex-direction: column;
    .name {
      width: 100%;
      font-size: 14px;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .desc {
      color: #909399;
      font-size: 12px;
    }
  }
}
::v-deep.el-form-item {
  margin-bottom: 22px !important;
}
.choose-audio {
  .audio-header {
    .input {
      width: 220px;
      ::v-deep.el-input__inner {
        border-color: #dcdfe6;
        &:focus {
          border-color: #409eff;
        }
      }
    }
    .link {
      margin-left: 10px;
    }
  }
  .audio-main {
    margin-top: 30px;
    .left,
    .right {
      border: 1px solid #e4e7ed;
    }
    .left {
      width: 244px;
      height: 370px;
      margin-right: 20px;
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        line-height: 50px;
        padding: 0 14px;
      }
      .material-tree {
        height: calc(100% - 50px);
        .el-scrollbar {
          height: 100%;
        }
        position: relative;
        .custom-tree-node__content {
          padding: 0 15px;
          height: 40px;
          .text {
            font-size: 13px;
            color: #606266;
          }
          .item-box {
            cursor: pointer;
          }
        }
        .custom-tree-node__children {
          .custom-tree-node {
            padding-left: 30px;
            padding-right: 15px;
            height: 40px;
            .item-box {
              flex: 1;
              cursor: pointer;
            }
            .text {
              flex: 1;
              height: 40px;
              line-height: 40px;
              font-size: 13px;
              color: #606266;
            }
            .el-icon-circle-plus-outline {
              font-size: 18px;
              color: $text-color-primary;
              cursor: pointer;
            }
          }
        }
        .el-icon-folder-opened {
          font-size: 16px;
          color: $text-color-primary;
          margin-right: 6px;
        }
      }
    }
    .right {
      height: 370px;
      flex: 1;
      .right-main {
        padding: 20px 20px 0;
        .list-box {
          width: 100%;
        }
      }
      .content {
        display: block;
        margin-bottom: 15px;
        padding: 12px 10px;
        border: 1px solid #e4e7ed;
        position: relative;
        &.is-checked {
          border-color: $text-color-primary;
        }
        .file-item {
          border: none;
          width: auto;
          .info {
            .name {
              width: 180px;
            }
          }
        }

        .el-radio__input.is-checked + .el-radio__label .tag {
          opacity: 1;
        }
        .tag {
          position: absolute;
          right: 0;
          top: 0;
          z-index: 10;
          opacity: 0;
          .Angle {
            position: absolute;
            right: -13px;
            top: -13px;
            width: 0;
            height: 0;
            border: 13px solid transparent;
            border-top-color: $text-color-primary;
            transform: rotate(-135deg);
          }
          .el-icon-check {
            position: absolute;
            right: 0;
            top: -1px;
            color: #fff;
            font-size: 12px;
          }
        }
        ::v-deep.el-checkbox__input {
          position: absolute;
          opacity: 0;
          top: 0;
        }
        ::v-deep.el-checkbox__label {
          display: block;
          padding-left: 0;
          line-height: 1;
        }
        ::v-deep.el-radio__inner {
          position: absolute;
          opacity: 0;
          top: 0;
        }
        .el-checkbox__input.is-checked + .el-checkbox__label .tag {
          opacity: 1;
        }
      }
    }
    ::v-deep.el-scrollbar {
      height: 100%;
      .el-scrollbar__wrap {
        overflow-x: auto;
      }
    }
  }
}
</style>
